<template>
  <view>
    <view class="layout" >
      <scroll-view   scroll-x="true" scroll-left="{{scrollLeft}}">
        <!--      <view class="tab-item" v-for="(item, index) in tabs" :key="index" @tap="switchTab(index)">-->
        <!--        {{ item.name }}-->
        <!--      </view>-->

        <view class="nav-wrap" >
          <view   :class="{ active1: activeIndex == index }" v-for="(item, index) in navList1" :key="index" @tap="switchTab(index)">
            {{ item.title }}
          </view>
        </view>


        <!--      <view class="nav-wrap">-->
        <!--        <view @click="bindNav1(index)" :class="{ active1: activeIndex == index }" v-for="(item, index) in navList1" :key="index">{{ item.title }}</view>-->
        <!--      </view>-->
      </scroll-view>
      <liu-drag-button @clickBtn="toPage" :bottomPx='860' :rightPx="10">
        <slot>
          <image src="/static/qp.png" style="width: 88rpx;height: 88rpx;" mode="aspectFill">
          </image>
        </slot>
      </liu-drag-button>
      <swiper class="swiper-box" :current="currentIndex" @change="swiperChange">

        <swiper-item v-for="(item, index) in navList1" :key="index">
          <view class="content-wrap">
            <!--          <view>内容 {{ item.title }}</view>-->
            <view class="f-nav">
              <view @click="bindNav2(index)" :class="{ active2: activeIndex2 == index }" v-for="(item, index) in navList2" :key="index">{{ item.title }}</view>
            </view>
            <view class="t-nav">
              <view @click="bindNav3(index)" v-for="(item, index) in navList3" :class="{ active3: activeIndex3 == index }" :key="index">{{ item.title }}</view>
            </view>

            <view class="r-text">
              <textarea class="textarea" style="height: 1900rpx; width: auto" v-model="navContent"></textarea>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab1' },
        { name: 'Tab2' },
        { name: 'Tab3' },
        // ...更多tabs
      ],
      currentIndex: 0,
      scrollLeft: 0,
      activeIndex: 0,
      activeIndex2: 0,
      activeIndex3: 0,
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      navList1: [],
      navList2: [],
      navList3: '',
      navContent: '',
      form: {}
    };
  },
onLoad() {
  this.initList();

},
  methods: {

    bindNav1: function (index) {

      this.activeIndex = index;

      let cur=  uni.getStorageSync(index.toString());
      console.log("cur===" + cur)
      if (cur) {
        console.log("cur 非空=================")
        let arr = cur.split("-")
        this.activeIndex2 = arr[0]
        this.activeIndex3 = arr[1]
        console.log("activeIndex="+ this.activeIndex)
        console.log("activeIndex2="+ this.activeIndex2)
        console.log("activeIndex3="+ this.activeIndex3)
      } else {
        this.activeIndex2 = 0
        this.activeIndex3 = 0
      }

      this.navList2 = this.navList1[this.activeIndex].children
      console.log("list2=" + this.navList2[0])
      this.navList3 = this.navList2[this.activeIndex2].children;
      // this.activeIndex2 = 0;
      // this.activeIndex3 = 0;
      this.navContent = this.navList3[this.activeIndex3].content;
      this.text1 = this.navList1[index].title;
      this.text2 = this.navList2[this.activeIndex2].title;
      this.text3 = this.navList2[this.activeIndex2].children[this.activeIndex3].title;
      this.text4 = this.navList2[this.activeIndex2].children[this.activeIndex3].content;

      uni.setStorageSync(index.toString(), this.activeIndex2 + "-" + this.activeIndex3)
      console.log(this.text1);
    },
    bindNav2(index) {
      this.navList2 = this.navList1[this.activeIndex].children
      this.text2 = this.navList2[index].title;
      this.text3 = this.navList2[index].children[0].title;
      this.text4 = this.navList2[index].children[0].content;
      console.log(this.text1);
      this.activeIndex2 = index;
      this.navList3 = this.navList2[index].children;
      this.activeIndex3 = 0;
      this.navContent = this.navList2[index].children[0].content;
      uni.setStorageSync(this.activeIndex.toString(), this.activeIndex2 + "-" + this.activeIndex3)
    },
    bindNav3(index) {
      this.navList2 = this.navList1[this.activeIndex].children
      this.text3 = this.navList2[this.activeIndex2].children[index].title;
      this.text4 = this.navList2[this.activeIndex2].children[index].content;
      console.log(this.text1, this.text2, this.text3);
      // this.text3 =this.navList2[this.activeIndex2].children[index].title
      // console.log(this.text3,'text333')
      this.activeIndex3 = index;
      this.navContent = this.navList2[this.activeIndex2].children[index].content;
      uni.setStorageSync(this.activeIndex.toString(), this.activeIndex2 + "-" + this.activeIndex3)
    },
    initList() {
      uni.showLoading({
        title: '加载中'
      })

      uni.request({
        url: 'https://zhixiaoyixue.com:86/menu/menu01', //仅为示例，并非真实接口地址。
        data: {},
        header: {
          'Access-Control-Allow-Origin': '*' //自定义请求头信息
        },
        success: (res) => {
          this.navList1 = res.data.navList1


          let cur=  uni.getStorageSync("0");
          console.log("cur===" + cur)
          if (cur) {
            console.log("cur 非空=================")
            let arr = cur.split("-")
            this.activeIndex2 = arr[0]
            this.activeIndex3 = arr[1]
            console.log("activeIndex="+ this.activeIndex)
            console.log("activeIndex2="+ this.activeIndex2)
            console.log("activeIndex3="+ this.activeIndex3)
          } else {
            this.activeIndex2 = 0
            this.activeIndex3 = 0
          }

          this.navList2 = this.navList1[this.activeIndex].children
          this.navList3 = this.navList2[this.activeIndex2].children
          this.text1 = this.navList1[0].title;
          this.text2 = this.navList2[0].title;
          this.text3 = this.navList2[0].children[0].title;
          this.text4 = this.navList2[0].children[0].content;
          console.log(this.text1);
          this.navList3 = this.navList2[this.activeIndex2].children;
          this.navContent = this.navList2[this.activeIndex2].children[this.activeIndex3].content;
          uni.hideLoading()
        }
      });

    },
    swiperChange(e) {
      this.currentIndex = e.detail.current;
      this.activeIndex = this.currentIndex;
      this.bindNav1(this.activeIndex)
    },
    switchTab(index) {
      this.currentIndex = index;
      this.scrollLeft = (index - 2) * 200; // 假设每个tab的宽度是100px
      this.bindNav1(index);
    },
    toPage() {
      uni.setStorageSync('text1', this.text1)
      uni.setStorageSync('text2', this.text2)
      uni.setStorageSync('text3', this.text3)
      uni.setStorageSync('text4', this.text4)
      uni.navigateTo({
        url: '/pages/component/dzs/detail'
      })
    },
  },
};
</script>

<style lang="scss">
.layout {
  .layout-top {
    position: relative;
    top: 50rpx;
    height: 50rpx;

    .title {
      font-size: 32rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;

      .dot {
        width: 6rpx;
        height: 6rpx;
        border-radius: 50%;
        background-color: #000;
        display: inline-block;
        margin: 0 15rpx;
      }
    }

    .big-box {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      position: absolute;
      right: 40rpx;
      top: 4rpx;

      image {
        width: 36rpx;
        margin-right: 6rpx;
      }
    }
  }

  .nav-wrap {
    display: flex;
    padding-top: 20rpx;
    overflow-x: auto;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    > view {
      font-size: 28rpx;
      white-space: nowrap;
      margin: 0 20rpx;
    }

    .active1 {
      color: #018dc5;
      border-bottom: 4rpx solid #018dc5;
      padding-bottom: 6rpx;
    }
  }

  .content-wrap {
    display: flex;
    margin-top: 20rpx;
    height: calc(100vh - 200rpx);
    font-size: 28rpx;

    .f-nav {
      background-color: #f4f5f9;
      // border:1px solid red;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      > view {
        padding: 20rpx;
        text-align: center;
        // border:1px solid red;
      }

      .active2 {
        background: #0080ff;
        color: #fff;
      }
    }

    .t-nav {
      background-color: #f8f7f3;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      > view {
        padding: 20rpx;
        text-align: center;
        // border:1px solid red;
      }

      .active3 {
        background: #f4c251;
        color: #fff;
      }
    }

    .r-text {
      white-space: normal;
      padding-top: 10rpx;
      padding-left: 10rpx;
      overflow-y: auto;
      flex: 1;
      // width: 52%;
      // border:1px solid red;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }
}

.swiper-box {
  height: 1600px; /* 根据实际情况设置高度 */
}

</style>